---
type: integration
title: '@astrojs/alpinejs'
description: Apprenez à utiliser l'intégration de framework @astrojs/alpinejs pour étendre la prise en charge des composants dans votre projet Astro.
sidebar:
  label: Alpine.js
githubIntegrationURL: 'https://github.com/withastro/astro/tree/main/packages/integrations/alpinejs/'
category: renderer
i18nReady: true
---
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
import Since from '~/components/Since.astro';

Cette **[intégration Astro][astro-integration]** ajoute [Alpine.js](https://alpinejs.dev/) à votre projet afin que vous puissiez utiliser Alpine.js n'importe où sur votre page.

## Installation

Astro inclut une commande `astro add` pour automatiser l'installation des intégrations officielles. Si vous préférez, vous pouvez [installer les intégrations manuellement](#installation-manuelle) à la place.

Pour installer `@astrojs/alpinejs`, exécutez ce qui suit depuis le répertoire de votre projet et suivez les instructions :

<PackageManagerTabs>
  <Fragment slot="npm">
    ```sh
    npx astro add alpinejs
    ```
  </Fragment>
  <Fragment slot="pnpm">
    ```sh
    pnpm astro add alpinejs
    ```
  </Fragment>
  <Fragment slot="yarn">
    ```sh
    yarn astro add alpinejs
    ```
  </Fragment>
</PackageManagerTabs>

Si vous rencontrez des problèmes, [n'hésitez pas à nous les signaler sur GitHub](https://github.com/withastro/astro/issues) et essayez les étapes d'installation manuelle ci-dessous.

### Installation manuelle

Tout d'abord, installez le paquet `@astrojs/alpinejs`.

<PackageManagerTabs>
  <Fragment slot="npm">
    ```sh
    npm install @astrojs/alpinejs
    ```
  </Fragment>
  <Fragment slot="pnpm">
    ```sh
    pnpm add @astrojs/alpinejs
    ```
  </Fragment>
  <Fragment slot="yarn">
    ```sh
    yarn add @astrojs/alpinejs
    ```
  </Fragment>
</PackageManagerTabs>

La plupart des gestionnaires de paquets installent également les dépendances associées. Cependant, si vous voyez un avertissement `Cannot find package 'alpinejs'` (ou similaire) lorsque vous démarrez Astro, vous devrez installer manuellement Alpine.js vous-même :

<PackageManagerTabs>
  <Fragment slot="npm">
    ```sh
    npm install alpinejs @types/alpinejs
    ```
  </Fragment>
  <Fragment slot="pnpm">
    ```sh
    pnpm add alpinejs @types/alpinejs
    ```
  </Fragment>
  <Fragment slot="yarn">
    ```sh
    yarn add alpinejs @types/alpinejs
    ```
  </Fragment>
</PackageManagerTabs>

Ensuite, appliquez l'intégration à votre fichier `astro.config.*` en utilisant la propriété `integrations` :

```js ins="alpinejs()" title="astro.config.mjs" ins={2}
import { defineConfig } from 'astro/config';
import alpinejs from '@astrojs/alpinejs';

export default defineConfig({
  // ...
  integrations: [alpinejs()],
});
```

## Options de configuration

### `entrypoint`

<p>

**Type :** `string`<br />
<Since v="0.4.0" pkg="@astrojs/alpinejs" />
</p>

Vous pouvez étendre Alpine en définissant l'option `entrypoint` sur un spécificateur d'importation relatif à la racine (par exemple `entrypoint: "/src/entrypoint"`).

L'exportation par défaut de ce fichier doit être une fonction qui accepte une instance Alpine avant de démarrer. Cela permet d'utiliser des directives personnalisées, des modules d'extension et d'autres personnalisations pour des cas d'utilisation avancés.

```js title="astro.config.mjs"
import { defineConfig } from 'astro/config';
import alpinejs from '@astrojs/alpinejs';

export default defineConfig({
  // ...
  integrations: [alpinejs({ entrypoint: '/src/entrypoint' })],
});
```

```js title="src/entrypoint.ts"
import type { Alpine } from 'alpinejs'
import intersect from '@alpinejs/intersect'

export default (Alpine: Alpine) => {
    Alpine.plugin(intersect)
}
```

## Utilisation

Une fois l'intégration installée, vous pouvez utiliser les directives et la syntaxe [Alpine.js](https://alpinejs.dev/) dans n'importe quel composant Astro. Le script Alpine.js est automatiquement ajouté et activé sur chaque page de votre site web, aucune directive client n'est donc nécessaire. Ajoutez les scripts du module d'extension dans la balise `<head>` de la page.

L'exemple suivant ajoute le module d'extension [Collapse d'Alpine](https://alpinejs.dev/plugins/collapse) pour développer et réduire le texte d'un paragraphe.

```astro title="src/pages/index.astro" ins={6} ins="x-collapse"
---
---
<html>
	<head>
		<!-- ... -->
		<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/collapse@3.x.x/dist/cdn.min.js"></script>
	</head>
	<body>
    <!-- ... -->
		<div x-data="{ expanded: false }">
			<button @click="expanded = ! expanded">Afficher/Masquer le contenu</button>

			<p id="foo" x-show="expanded" x-collapse>
        Lorem ipsum
			</p>
		</div>
	</body>
</html>
```

## Intellisense pour TypeScript

L'intégration `@astrojs/alpine` ajoute `Alpine` à [l'objet global de la fenêtre](/fr/guides/typescript/#extension-des-types-globaux). Pour l'autocomplétion de l'IDE, ajoutez ce qui suit à votre `src/env.d.ts` :

```ts title="src/env.d.ts"
interface Window {
  Alpine: import('alpinejs').Alpine;
}
```

## Exemples

* L'[exemple Astro Alpine.js](https://github.com/withastro/astro/tree/main/examples/framework-alpine) montre comment utiliser Alpine.js dans un projet Astro.

[astro-integration]: /fr/guides/integrations-guide/

[astro-ui-frameworks]: /fr/guides/framework-components/#utilisation-des-composants-de-framework
